<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>vue-入门Day.07 | 让技术更简单</title>

  <!-- keywords -->
  

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="VueX简介Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。小项目用之前的父子组件传递方法，大项目用vuex方法。 什么是”状态管理模式”？让我们从一个简单的 Vue 计数应用开始,如： 123456789101112131415161718new Vue(&amp;#123;  &#x2F;&#x2F; state">
<meta property="og:type" content="article">
<meta property="og:title" content="vue-入门Day.07">
<meta property="og:url" content="http://example.com/2022/03/23/vue-day07/index.html">
<meta property="og:site_name" content="让技术更简单">
<meta property="og:description" content="VueX简介Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。小项目用之前的父子组件传递方法，大项目用vuex方法。 什么是”状态管理模式”？让我们从一个简单的 Vue 计数应用开始,如： 123456789101112131415161718new Vue(&amp;#123;  &#x2F;&#x2F; state">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://example.com/2022/03/23/vue-day07/flow.png">
<meta property="article:published_time" content="2022-03-23T05:49:14.000Z">
<meta property="article:modified_time" content="2022-03-24T12:43:07.146Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/2022/03/23/vue-day07/flow.png">
  
    <link rel="alternative" href="/atom.xml" title="让技术更简单" type="application/atom+xml">
  
  
    <link rel="icon" href="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  

  
<script src="//cdn.bootcss.com/require.js/2.3.2/require.min.js"></script>

  
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>


  
<meta name="generator" content="Hexo 6.1.0"></head>
<body>
  <div id="container">
    <div id="particles-js"></div>
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			
			<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/"></a></h1>
		</hgroup>

		

		
			<div class="switch-btn">
				<div class="icon">
					<div class="icon-ctn">
						<div class="icon-wrap icon-house" data-idx="0">
							<div class="birdhouse"></div>
							<div class="birdhouse_holes"></div>
						</div>
						<div class="icon-wrap icon-ribbon hide" data-idx="1">
							<div class="ribbon"></div>
						</div>
						
						<div class="icon-wrap icon-link hide" data-idx="2">
							<div class="loopback_l"></div>
							<div class="loopback_r"></div>
						</div>
						
						
					</div>
					
				</div>
				<div class="tips-box hide">
					<div class="tips-arrow"></div>
					<ul class="tips-inner">
						<li>菜单</li>
						<li>标签</li>
						
						<li>友情链接</li>
						
						
					</ul>
				</div>
			</div>
		

		<div class="switch-area">
			<div class="switch-wrap">
				<section class="switch-part switch-part1">
					<nav class="header-menu">
						<ul>
						
							<li><a href="/">主页</a></li>
				        
							<li><a href="/archives">所有文章</a></li>
				        
						</ul>
					</nav>
					<nav class="header-nav">
						<div class="social">
							
						</div>
					</nav>
				</section>
				
				
				<section class="switch-part switch-part2">
					<div class="widget tagcloud" id="js-tagcloud">
						
					</div>
				</section>
				
				
				
				<section class="switch-part switch-part3">
					<div id="js-friends">
					
			          <a target="_blank" class="main-nav-link switch-friends-link" href="https://github.com/smackgg/hexo-theme-smackdown">smackdown</a>
			        
			        </div>
				</section>
				

				
			</div>
		</div>
	</header>				
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"></div>
  		<h1 class="header-author js-mobile-header hide"></h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author"></h1>
			</hgroup>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/archives">所有文章</a></li>
		        
		        <div class="clearfix"></div>
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div class="body-wrap"><article id="post-vue-day07" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2022/03/23/vue-day07/" class="article-date">
  	<time datetime="2022-03-23T05:49:14.000Z" itemprop="datePublished">2022-03-23</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      vue-入门Day.07
      
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
        

        
        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="VueX"><a href="#VueX" class="headerlink" title="VueX"></a>VueX</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p><code>Vuex</code>是一个专为 Vue.js 应用程序开发的<strong>状态管理模式</strong>。它采用集中式存储管理应用的<strong>所有组件的状态</strong>，并以相应的规则保证状态以一种<strong>可预测</strong>的方式<strong>发生变化</strong>。<br><strong>小项目</strong>用之前的父子组件传递方法，<strong>大项目</strong>用vuex方法。</p>
<h3 id="什么是”状态管理模式”？"><a href="#什么是”状态管理模式”？" class="headerlink" title="什么是”状态管理模式”？"></a>什么是”状态管理模式”？</h3><p>让我们从一个简单的 Vue 计数应用开始,如：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">new Vue(<span class="punctuation">&#123;</span></span><br><span class="line">  <span class="comment">// state</span></span><br><span class="line">  data () <span class="punctuation">&#123;</span></span><br><span class="line">    return <span class="punctuation">&#123;</span></span><br><span class="line">      count<span class="punctuation">:</span> <span class="number">0</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="comment">// view</span></span><br><span class="line">  template<span class="punctuation">:</span> </span><br><span class="line">    &lt;div&gt;<span class="punctuation">&#123;</span><span class="punctuation">&#123;</span> count <span class="punctuation">&#125;</span><span class="punctuation">&#125;</span>&lt;/div&gt;</span><br><span class="line">  `<span class="punctuation">,</span></span><br><span class="line">  <span class="comment">// actions</span></span><br><span class="line">  methods<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    increment () <span class="punctuation">&#123;</span></span><br><span class="line">      this.count++</span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span>)</span><br></pre></td></tr></table></figure>

<p>这个状态自管理应用包含以下几个部分：</p>
<p> <code>state</code>，驱动应用的数据源；(模板层)<br> <code>view</code>，以声明方式将 state 映射到视图；(视图层)<br> <code>actions</code>，响应在 view 上的用户输入导致的状态变化。(方法层)</p>
<p><img src="/2022/03/23/vue-day07/flow.png" alt="单向数据流"></p>
<p>这三者相互转化，是一条<strong>单向数据流</strong></p>
<p><strong>单向数据流</strong>:state通过<code>state.Dispatch</code>方法去触发actions，actions再通过<code>state.commit</code>去触发mutations，只有mutations被触发了state才会更新。</p>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx vue add vuex</span><br></pre></td></tr></table></figure>
<h2 id="再创建一个-js文件实例化一个Store，并导出他："><a href="#再创建一个-js文件实例化一个Store，并导出他：" class="headerlink" title="再创建一个.js文件实例化一个Store，并导出他："></a>再创建一个.js文件实例化一个Store，并导出他：</h2><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在store文件中</span></span><br><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import Vuex from &#x27;vuex&#x27;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过vue.use注册Vuex</span></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 实例化一个store对象</span></span><br><span class="line">export default new Vuex.Store(<span class="punctuation">&#123;</span></span><br><span class="line">  <span class="comment">// state类似于组件中的data，用来存放对象</span></span><br><span class="line">  <span class="comment">// state中的对象只能通过mutations中的函数修改</span></span><br><span class="line">  state<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    count<span class="punctuation">:</span><span class="number">0</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="comment">// getters类似于组件中的computed对象，用来处理数据</span></span><br><span class="line">  getters<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="comment">// mutations和actions类似于组件中的methods对象</span></span><br><span class="line">  <span class="comment">// mutations中必须使用同步函数，mutations中的函数用于修改state中的对象</span></span><br><span class="line">  mutations<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    increment (state) <span class="punctuation">&#123;</span></span><br><span class="line">      state.count++</span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="comment">//  actions中的函数可以返回一个Promise，这也说明actions中可以使用异步函数的。</span></span><br><span class="line">  <span class="comment">// actions中的函数不能直接修改state，需要调用mutations中的函数来修改。</span></span><br><span class="line">  <span class="comment">// 通过commit调用mutations中的函数</span></span><br><span class="line">  actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="comment">// 模块对象。每个模块相当于一个Store的实例化对象</span></span><br><span class="line">  modules<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在子组件中</span></span><br><span class="line">export default <span class="punctuation">&#123;</span></span><br><span class="line">  mounted()<span class="punctuation">&#123;</span></span><br><span class="line">    <span class="comment">// 通过this.$store.commit的形式调用mutations中的increment函数修改state中的count对象</span></span><br><span class="line">    this.$store.commit(&#x27;increment&#x27;)</span><br><span class="line">    <span class="comment">// 打印修改后的数据</span></span><br><span class="line">    console.log(this.$store.state.count)</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h2 id="state"><a href="#state" class="headerlink" title="state"></a>state</h2><h3 id="单一状态树"><a href="#单一状态树" class="headerlink" title="单一状态树"></a>单一状态树</h3><p>Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“<code>唯一数据源</code> ”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。</p>
<h3 id="在-Vue-组件中获得-Vuex-状态"><a href="#在-Vue-组件中获得-Vuex-状态" class="headerlink" title="在 Vue 组件中获得 Vuex 状态"></a>在 Vue 组件中获得 Vuex 状态</h3><p>获取vuex状态<br>在组建方法中：this.$store.state.xxx<br>在标签中：$store.state.xxx或this.$store.state.xxx</p>
<p>1.直接获取</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$store属于一个vuex框架中的对象，里面包含vuex中的数据。也可以通过computd属性去拿到全局状态下的数据。</span></span><br><span class="line">console.log(this.$store.state.name);<span class="comment">//获取state中的数据从而拿到全局中的name值。</span></span><br></pre></td></tr></table></figure>
<p>2.通过计算属性获取：</p>
<figure class="highlight plaintext"><figcaption><span>&#123;</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">  count () &#123;</span><br><span class="line">    return this.$store.state.count</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="mapState-辅助函数"><a href="#mapState-辅助函数" class="headerlink" title="mapState 辅助函数"></a>mapState 辅助函数</h3><p>当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。</p>
<h4 id="使用方式："><a href="#使用方式：" class="headerlink" title="使用方式："></a>使用方式：</h4><p>1.导入mapState<br><code>import &#123;mapState&#125; from &#39;vuex&#39;;</code><br>2.设立计算属性进行传参获取状态。(数组、对象、函数都可以作为参数)</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过mapState的映射处理了name，此时就拿到了全局中的name值。</span></span><br><span class="line">  computed<span class="punctuation">:</span>mapState(<span class="punctuation">[</span>&#x27;name&#x27;<span class="punctuation">]</span>)<span class="punctuation">,</span><span class="comment">//传数组，数组的好处就是方便</span></span><br><span class="line">  <span class="comment">// 传对象</span></span><br><span class="line"></span><br><span class="line">  computed<span class="punctuation">:</span>mapState(<span class="punctuation">&#123;</span></span><br><span class="line">    name<span class="punctuation">:</span>(state)=&gt;state.name<span class="punctuation">,</span><span class="comment">//表示传参得到name的值，这些方法都可以拿到值，对象的好处就是可以改key值</span></span><br><span class="line">  <span class="punctuation">&#125;</span>)</span><br><span class="line">  <span class="comment">// 传函数</span></span><br><span class="line"></span><br><span class="line">  computed<span class="punctuation">:</span>mapState(<span class="punctuation">&#123;</span></span><br><span class="line">    xixixi(state)<span class="punctuation">&#123;</span></span><br><span class="line">      console.log(state);</span><br><span class="line">      return &#x27;这是测试&#x27;;<span class="comment">//传函数，可为任意值</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="对象展开运算符"><a href="#对象展开运算符" class="headerlink" title="对象展开运算符"></a>对象展开运算符</h3><p>简单来说运用的就是es6中的解构方法。</p>
<h2 id="Getter"><a href="#Getter" class="headerlink" title="Getter"></a>Getter</h2><p>相当于对组件内部进行计算的,需要运用api的。</p>
<h2 id="获取数据"><a href="#获取数据" class="headerlink" title="获取数据"></a>获取数据</h2><p>Vuex 允许我们在 store 中定义<code>“getter”</code>（可以认为是 <code>store </code>的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。可接收多个参数</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">getters<span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="comment">//相当于对组件内部进行计算的</span></span><br><span class="line">    newName(state<span class="punctuation">,</span>getters)<span class="punctuation">&#123;</span><span class="comment">//可接收第二个参数的传值，多个getters合并,直接传newName2的话是一个getters也就是一个对象，要引用里面的结果的话可以写getters.newName</span></span><br><span class="line">    <span class="comment">// 通过getters将数据处理并保存，在组件中通过this.$store.getters.xxx获取对应的处理结果</span></span><br><span class="line">      console.log(getters.newName2);</span><br><span class="line">      return state.name+&#x27;<span class="number">222</span>&#x27;+getters.newName2;<span class="comment">//插值通过$store.getters.newName进行插值。</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    newName2()<span class="punctuation">&#123;</span></span><br><span class="line">      return &#x27;<span class="number">33333</span>&#x27;;</span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<h3 id="通过方法访问"><a href="#通过方法访问" class="headerlink" title="通过方法访问"></a>通过方法访问</h3><p>你也可以通过让 <code>getter</code> 返回一个函数，来实现给 getter 传参。在你对 <code>store</code> 里的数组进行查询时非常有用。</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">getters<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  getTodoById<span class="punctuation">:</span> function(state) <span class="punctuation">&#123;</span></span><br><span class="line">    return (id) =&gt;<span class="punctuation">&#123;</span></span><br><span class="line">      <span class="comment">// todos是一个数组</span></span><br><span class="line">      return 	state.todos.find(todo =&gt; todo.id === id)</span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h4><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mounted()<span class="punctuation">&#123;</span></span><br><span class="line">    this.$store.getters.getTodoById(<span class="number">2</span>)</span><br><span class="line"><span class="punctuation">&#125;</span>;</span><br></pre></td></tr></table></figure>

<h3 id="mapGetters-辅助函数"><a href="#mapGetters-辅助函数" class="headerlink" title="mapGetters 辅助函数"></a>mapGetters 辅助函数</h3><figure class="highlight plaintext"><figcaption><span>辅助函数仅仅是将 ```store``` 中的 ```getter``` 映射到局部计算属性,使用方式和mapState差不多.</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">#### 使用方式：</span><br><span class="line">1.导入mapGetters</span><br><span class="line">```import &#123;mapGetters&#125; from &#x27;vuex&#x27;;```</span><br><span class="line">2.设立计算属性进行传参获取状态。(数组、对象、函数都可以作为参数)</span><br><span class="line">```json</span><br><span class="line">computed:&#123;</span><br><span class="line">    // 使用对象展开运算符将 getter 混入 computed 对象中,使用前前面加三个点，展开运算符</span><br><span class="line">    ...mapGetters([&#x27;newName&#x27;]),//通过mapGetters的映射处理了getters中的newName，此时就拿到了全局中的newName值。再进行插值，方法和mapState差不多。</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h2 id="Mutation"><a href="#Mutation" class="headerlink" title="Mutation"></a>Mutation</h2><p>更改 Vuex 的 store 中的状态的唯一方法是提交 <code>mutation</code>。Vuex 中的 <code>mutation</code> 非常类似于事件：每个 <code>mutation</code> 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 <code>state</code> 作为第一个参数：</p>
<h3 id="Mutation-必须是同步函数"><a href="#Mutation-必须是同步函数" class="headerlink" title="Mutation 必须是同步函数"></a>Mutation 必须是同步函数</h3><h4 id="接收参数"><a href="#接收参数" class="headerlink" title="接收参数"></a>接收参数</h4><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">mutations<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="comment">// 在大多数情况下，载荷应该是一个对象，</span></span><br><span class="line">    increment (state<span class="punctuation">,</span>payload) <span class="punctuation">&#123;</span></span><br><span class="line">      state.count++;</span><br><span class="line">      console.log(payload);</span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<h4 id="传入参数"><a href="#传入参数" class="headerlink" title="传入参数"></a>传入参数</h4><p>参数2可以是一个对像，也可以是多个参数</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mounted()<span class="punctuation">&#123;</span></span><br><span class="line">    this.$store.commit(&#x27;increment&#x27;<span class="punctuation">,</span><span class="punctuation">&#123;</span><span class="attr">&quot;a&quot;</span><span class="punctuation">:</span><span class="number">12</span><span class="punctuation">,</span><span class="attr">&quot;b&quot;</span><span class="punctuation">:</span><span class="number">21</span><span class="punctuation">&#125;</span>)</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h4 id="对象风格的提交方式"><a href="#对象风格的提交方式" class="headerlink" title="对象风格的提交方式"></a>对象风格的提交方式</h4><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line">mounted()<span class="punctuation">&#123;</span></span><br><span class="line">    this.$store.commit(<span class="punctuation">&#123;</span></span><br><span class="line">      <span class="comment">// type属性对应mutations中的方法</span></span><br><span class="line">      type<span class="punctuation">:</span>&#x27;increment&#x27;<span class="punctuation">,</span></span><br><span class="line">      <span class="comment">//剩下的属性都是参数，全部会被放到payload对象中</span></span><br><span class="line">      amount<span class="punctuation">:</span> <span class="number">10</span><span class="punctuation">,</span></span><br><span class="line">      account<span class="punctuation">:</span><span class="string">&quot;hao123&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span>)</span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="Mutation-需遵守-Vue-的响应规则"><a href="#Mutation-需遵守-Vue-的响应规则" class="headerlink" title="Mutation 需遵守 Vue 的响应规则"></a>Mutation 需遵守 Vue 的响应规则</h3><p>既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：</p>
<ol>
<li>最好提前在你的 store 中初始化好所有所需属性。</li>
<li>当需要在对象上添加新属性时，你应该<br>● 使用 <code>Vue.set</code>(obj, ‘newProp’, 123), 或者<br>● 以新对象替换老对象。例如，利用<strong>对象展开运算符</strong>我们可以这样写：<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">state.obj = <span class="punctuation">&#123;</span> ...state.obj<span class="punctuation">,</span> newProp<span class="punctuation">:</span> <span class="number">123</span> <span class="punctuation">&#125;</span>;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="使用常量替代-Mutation-事件类型"><a href="#使用常量替代-Mutation-事件类型" class="headerlink" title="使用常量替代 Mutation 事件类型"></a>使用常量替代 Mutation 事件类型</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在store中的index.js中导入</span></span><br><span class="line">export const SOME_MUTATION = &#x27;SOME_MUTATION&#x27;;</span><br><span class="line">export const mutations= <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="comment">// 在大多数情况下，载荷应该是一个对象，</span></span><br><span class="line">  increment (state<span class="punctuation">,</span>payload) <span class="punctuation">&#123;</span></span><br><span class="line">    state.count++;</span><br><span class="line">    console.log(payload);</span><br><span class="line">    console.log(state)</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="在组件中提交-Mutation"><a href="#在组件中提交-Mutation" class="headerlink" title="在组件中提交 Mutation"></a>在组件中提交 Mutation</h3><h4 id="mapMutations-辅助函数"><a href="#mapMutations-辅助函数" class="headerlink" title="mapMutations 辅助函数"></a>mapMutations 辅助函数</h4><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">methods<span class="punctuation">:</span><span class="punctuation">&#123;</span></span><br><span class="line">    ...mapMutations(<span class="punctuation">[</span></span><br><span class="line">      &#x27;increment&#x27;<span class="comment">// 将 `this.increment()` 映射为 `this.$store.commit(&#x27;increment&#x27;)`</span></span><br><span class="line">    <span class="punctuation">]</span>)<span class="punctuation">,</span></span><br><span class="line">    ...mapMutations(<span class="punctuation">&#123;</span></span><br><span class="line">      <span class="comment">// 别名</span></span><br><span class="line">      add<span class="punctuation">:</span> &#x27;increment&#x27; <span class="comment">// 将 `this.add()` 映射为 `this.$store.commit(&#x27;increment&#x27;)`</span></span><br><span class="line">    <span class="punctuation">&#125;</span>)</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h4 id="使用-1"><a href="#使用-1" class="headerlink" title="使用"></a>使用</h4><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">mounted()<span class="punctuation">&#123;</span></span><br><span class="line">    this.increment();</span><br><span class="line">    this.add()</span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<p><strong>使用逻辑</strong>：在mutation中使用方法，再在组件中使用辅助函数把方法简单化，最后在组件的mounted中调用mutation。</p>
<h2 id="action"><a href="#action" class="headerlink" title="action"></a>action</h2><h3 id="action与mutation的区别："><a href="#action与mutation的区别：" class="headerlink" title="action与mutation的区别："></a>action与mutation的区别：</h3><p>相同点：都可以进行同步操作。<br>不同点：<code>action</code>既可以进行同步操作也可以进行<code>异步操作</code>，而<code>mutation</code>只能进行同步操作，但<code>action</code>只能<strong>查找</strong>state中的数据，只能通过<code>mutation</code>来<strong>修改</strong>数据。</p>
<h3 id="使用-2"><a href="#使用-2" class="headerlink" title="使用"></a>使用</h3><p>Action 函数接受一个与 store 实例具有相同方法和属性的 <code>context</code> 对象，因此你可以调用 <code>context.commit</code> 提交一个 <code>mutation</code>，或者通过 <code>context.state</code> 和 <code>context.getters</code> 来获取 state 和 getters。</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="comment">// 这里的context相当于是store </span></span><br><span class="line">    increment (context) <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="comment">//commit中的increment是mutations中的函数</span></span><br><span class="line">      context.commit(&#x27;increment&#x27;)</span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<p>实践中，我们会经常用到 ES6 的 参数解构来简化代码（特别是我们需要调用 commit 很多次的时候）：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="comment">// 通过解构获取到commit对象--》const &#123;commit&#125; = store</span></span><br><span class="line">  increment (<span class="punctuation">&#123;</span> commit <span class="punctuation">&#125;</span>) <span class="punctuation">&#123;</span><span class="comment">//此时的&#123;commit&#125;===context，那么context.commit=commit，那么就可以直接写commit(&#x27;increment&#x27;)。</span></span><br><span class="line">    commit(&#x27;increment&#x27;)</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="触发action"><a href="#触发action" class="headerlink" title="触发action"></a>触发action</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">mounted()<span class="punctuation">&#123;</span></span><br><span class="line">    <span class="comment">// 在组件中，触发action中的方法</span></span><br><span class="line">    this.$store.dispatch(&#x27;increment&#x27;)</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="使用方法"><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h3><p>action这里的context相当于是store ,也就相当于vuex.store的实例化对象。首先对action进行引用：<code>this.$store.dispatch（action中的一个方法，参数）</code>，传值给action，action主要是处理异步操作，做完异步操作后把数据通过<code>context.commit（mutation中的一个方法，参数）</code>传给mutation，然后mutation再对数据进行处理，进行赋值把值修改。</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// store文件中的index.js文件</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">export default new Vuex.Store(<span class="punctuation">&#123;</span></span><br><span class="line">  </span><br><span class="line">  state<span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="comment">//里面的数据属于全局，类似于组件中的data，在组件中叫data，在仓库中叫state。</span></span><br><span class="line">    name<span class="punctuation">:</span>&#x27;vuex里的数据&#x27;<span class="punctuation">,</span></span><br><span class="line">    count<span class="punctuation">:</span><span class="number">0</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  mutations<span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="comment">//类似与组件中的methods</span></span><br><span class="line">    <span class="comment">// 不能直接调用increment，要使用store.commit(&#x27;increment)去引用。处理数据。</span></span><br><span class="line">    changeName(state<span class="punctuation">,</span>arg)<span class="punctuation">&#123;</span><span class="comment">//第二个参数才开始传值，作为形参</span></span><br><span class="line">      console.log(arg);</span><br><span class="line">      this.state.name=&#x27;我是name的新值&#x27;;</span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    increment (state<span class="punctuation">,</span>payload)<span class="punctuation">&#123;</span></span><br><span class="line">      state.count=payload;<span class="comment">//表示每调用一次count值+1；</span></span><br><span class="line">      console.log(payload);</span><br><span class="line">      <span class="comment">// store.commit(&#x27;increment&#x27;)</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="comment">// 这里的context相当于是store ,也就相当于vuex.store的实例化对象。主要是处理异步操作，做完异步操作后把数据传给mutation，然后mutation再对数据进行处理，进行赋值把值修改。</span></span><br><span class="line">    increment (context<span class="punctuation">,</span>payload) <span class="punctuation">&#123;</span></span><br><span class="line">      console.log(context);</span><br><span class="line">      <span class="comment">//commit中的increment是mutations中的函数</span></span><br><span class="line">      context.commit(&#x27;increment&#x27;<span class="punctuation">,</span>payload);</span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//组件中的vue文件</span></span><br><span class="line"></span><br><span class="line">export default <span class="punctuation">&#123;</span></span><br><span class="line">  mounted()<span class="punctuation">&#123;</span></span><br><span class="line">    this.$store.dispatch(&#x27;increment&#x27;<span class="punctuation">,</span><span class="number">10</span>)</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="Actions-支持同样的载荷方式和对象方式进行分发"><a href="#Actions-支持同样的载荷方式和对象方式进行分发" class="headerlink" title="Actions 支持同样的载荷方式和对象方式进行分发"></a>Actions 支持同样的载荷方式和对象方式进行分发</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">mounted()<span class="punctuation">&#123;</span></span><br><span class="line">  <span class="comment">// 以载荷形式分发</span></span><br><span class="line">    this.$store.dispatch(&#x27;increment&#x27;<span class="punctuation">,</span><span class="punctuation">&#123;</span><span class="attr">&quot;a&quot;</span><span class="punctuation">:</span><span class="number">123</span><span class="punctuation">,</span><span class="attr">&quot;b&quot;</span><span class="punctuation">:</span><span class="number">456</span><span class="punctuation">&#125;</span>)</span><br><span class="line">  </span><br><span class="line">  <span class="comment">// 以对象形式分发</span></span><br><span class="line">  this.$store.dispatch(<span class="punctuation">&#123;</span></span><br><span class="line">    type<span class="punctuation">:</span> &#x27;increment&#x27;<span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;a&quot;</span><span class="punctuation">:</span><span class="number">123</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;b&quot;</span><span class="punctuation">:</span><span class="number">456</span></span><br><span class="line">  <span class="punctuation">&#125;</span>)</span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h4 id="接收方式也是一样的"><a href="#接收方式也是一样的" class="headerlink" title="接收方式也是一样的"></a>接收方式也是一样的</h4><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    increment (context<span class="punctuation">,</span>payload) <span class="punctuation">&#123;</span></span><br><span class="line">      context.commit(&#x27;increment&#x27;<span class="punctuation">,</span>payload)</span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<h3 id="在组件中分发-Action"><a href="#在组件中分发-Action" class="headerlink" title="在组件中分发 Action"></a>在组件中分发 Action</h3><h4 id="mapActions-辅助函数"><a href="#mapActions-辅助函数" class="headerlink" title="mapActions 辅助函数"></a>mapActions 辅助函数</h4><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">methods<span class="punctuation">:</span><span class="punctuation">&#123;</span><span class="comment">//只能查找action中的数据，不能修改数据。</span></span><br><span class="line">    ...mapActions (<span class="punctuation">[</span></span><br><span class="line">      &#x27;increment&#x27;<span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">]</span>)<span class="punctuation">,</span></span><br><span class="line">    ...mapActions (<span class="punctuation">&#123;</span></span><br><span class="line">      add<span class="punctuation">:</span>&#x27;increment&#x27;<span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span>)</span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<h3 id="store-dispatch"><a href="#store-dispatch" class="headerlink" title="store.dispatch"></a>store.dispatch</h3><p>store为vuex的实例化对象。</p>
<p><code>store.dispatch</code>返回一个Promise<br><code>action</code>中的函数也可以返回一个Promise</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  actionA (<span class="punctuation">&#123;</span> commit <span class="punctuation">&#125;</span>) <span class="punctuation">&#123;</span></span><br><span class="line">    return new Promise((resolve<span class="punctuation">,</span> reject) =&gt; <span class="punctuation">&#123;</span></span><br><span class="line">      setTimeout(() =&gt; <span class="punctuation">&#123;</span></span><br><span class="line">        commit(&#x27;someMutation&#x27;)</span><br><span class="line">        resolve()</span><br><span class="line">      <span class="punctuation">&#125;</span><span class="punctuation">,</span> <span class="number">1000</span>)</span><br><span class="line">    <span class="punctuation">&#125;</span>)</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br><span class="line"></span><br><span class="line">store.dispatch(&#x27;actionA&#x27;)返回一个Promise</span><br></pre></td></tr></table></figure>

<p>actions中的函数亦可以使用dispatch触发另一个action</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  actionB (<span class="punctuation">&#123;</span> dispatch<span class="punctuation">,</span> commit <span class="punctuation">&#125;</span>) <span class="punctuation">&#123;</span></span><br><span class="line">    return dispatch(&#x27;actionA&#x27;).then(() =&gt; <span class="punctuation">&#123;</span></span><br><span class="line">      commit(&#x27;someOtherMutation&#x27;)</span><br><span class="line">    <span class="punctuation">&#125;</span>)</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="使用async-await处理异步函数"><a href="#使用async-await处理异步函数" class="headerlink" title="使用async await处理异步函数"></a>使用async await处理异步函数</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  async actionA (<span class="punctuation">&#123;</span> commit <span class="punctuation">&#125;</span>) <span class="punctuation">&#123;</span><span class="comment">//&#123; commit &#125;也可以换成context</span></span><br><span class="line">    commit(&#x27;gotData&#x27;<span class="punctuation">,</span> await getData())</span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  async actionB (<span class="punctuation">&#123;</span> dispatch<span class="punctuation">,</span> commit <span class="punctuation">&#125;</span>) <span class="punctuation">&#123;</span><span class="comment">//&#123; dispatch, commit &#125;也可以换成context</span></span><br><span class="line">    await dispatch(&#x27;actionA&#x27;) <span class="comment">// 等待 actionA 完成</span></span><br><span class="line">    commit(&#x27;gotOtherData&#x27;<span class="punctuation">,</span> await getOtherData())</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="module"><a href="#module" class="headerlink" title="module"></a>module</h2><p>由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。</p>
<p>为了解决以上问题，Vuex 允许我们将 store <strong>分割成模块（module）</strong>。每个模块拥有自己的 <code>state、mutation、action、getter、</code>甚至是嵌套子模块——从上至下进行同样方式的分割：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">const moduleA = <span class="punctuation">&#123;</span></span><br><span class="line">  state<span class="punctuation">:</span> () =&gt; (<span class="punctuation">&#123;</span> ... <span class="punctuation">&#125;</span>)<span class="punctuation">,</span></span><br><span class="line">  mutations<span class="punctuation">:</span> <span class="punctuation">&#123;</span> ... <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span> ... <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  getters<span class="punctuation">:</span> <span class="punctuation">&#123;</span> ... <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br><span class="line"></span><br><span class="line">const moduleB = <span class="punctuation">&#123;</span></span><br><span class="line">  state<span class="punctuation">:</span> () =&gt; (<span class="punctuation">&#123;</span> ... <span class="punctuation">&#125;</span>)<span class="punctuation">,</span></span><br><span class="line">  mutations<span class="punctuation">:</span> <span class="punctuation">&#123;</span> ... <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  actions<span class="punctuation">:</span> <span class="punctuation">&#123;</span> ... <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br><span class="line"></span><br><span class="line">const store = new Vuex.Store(<span class="punctuation">&#123;</span></span><br><span class="line">  modules<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    a<span class="punctuation">:</span> moduleA<span class="punctuation">,</span></span><br><span class="line">    b<span class="punctuation">:</span> moduleB</span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span>)</span><br><span class="line"></span><br><span class="line">store.state.a <span class="comment">// -&gt; moduleA 的状态</span></span><br><span class="line">store.state.b <span class="comment">// -&gt; moduleB 的状态</span></span><br></pre></td></tr></table></figure>
      
    </div>
    
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2022/03/24/vue-day08/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">&lt;</strong>
      <div class="article-nav-title">
        
          vue-day08
        
      </div>
    </a>
  
  
    <a href="/2022/03/22/vue-day06/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">vue-入门Day.06</div>
      <strong class="article-nav-caption">&gt;</strong>
    </a>
  
</nav>

  
</article>


<div class="ds-share share" data-thread-key="vue-day07" data-title="vue-入门Day.07" data-url="http://example.com/2022/03/23/vue-day07/"  data-images="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" data-content="vue-入门Day.07">
    <div class="ds-share-inline">
      <ul  class="ds-share-icons-16">
      	<li data-toggle="ds-share-icons-more"><a class="ds-more" href="javascript:void(0);">分享到：</a></li>
        <li><a class="ds-weibo" href="javascript:void(0);" data-service="weibo">微博</a></li>
        <li><a class="ds-qzone" href="javascript:void(0);" data-service="qzone">QQ空间</a></li>
        <li><a class="ds-qqt" href="javascript:void(0);" data-service="qqt">腾讯微博</a></li>
        <li><a class="ds-wechat" href="javascript:void(0);" data-service="wechat">微信</a></li>
      </ul>
      <div class="ds-share-icons-more">
      </div>
    </div>
 </div>
 





</div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
      <div class="footer-left">
        &copy; 2022 John Doe
      </div>
        <div class="footer-right">
          <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/smackgg/hexo-theme-smackdown" target="_blank">Smackdown</a>
        </div>
    </div>
  </div>
</footer>
    </div>
    
  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">



<script>
	var yiliaConfig = {
		fancybox: true,
		mathjax: true,
		animate: true,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false
	}
</script>

<script src="/js/main.js"></script>




<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js"></script>


  </div>
</body>
</html>